<template>
  <div class="un-eseal-setter">
    <el-divider direction="horizontal" content-position="center"
      >电子签章设置</el-divider
    >
    <el-form-item label="电子签章">
      <el-upload
        ref="upload"
        action="/infra/file/upload"
        :multiple="false"
        :limit="1"
        accept="image/jpg"
        :http-request="submitUpload"
        :before-upload="beforeUpload"
      >
        <el-button slot="trigger" size="small" type="primary">选择</el-button>
        <div slot="tip" class="el-upload__tip">
          只能上传图片文件，且不超过2M
        </div>
      </el-upload>
    </el-form-item>
    <el-form-item label="距离右侧">
      <el-input
        placeholder="设置距离右侧距离"
        v-model="activeData.right"
        size="small"
        clearable
      >
        <template slot="append">px</template>
      </el-input>
    </el-form-item>
    <el-form-item label="距离顶侧">
      <el-input
        placeholder="设置距离顶侧距离"
        v-model="activeData.top"
        size="small"
        clearable
      >
        <template slot="append">px</template></el-input
      >
    </el-form-item>
  </div>
</template>

<script>
import { postFileUpload } from "@/api/infra/file";

export default {
  name: "UnEsealSetter",
  props: {
    activeData: Object,
  },
  data() {
    return {
      file: null,
      imageUrl: "",
    };
  },
  methods: {
    beforeUpload(file) {
      debugger;
      const isImg = file.type.indexOf("image/") !== -1;
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isImg) {
        this.$message.error("上传电子签章不是图片!");
      }
      if (!isLt2M) {
        this.$message.error("上传电子签章图片大小不能超过 2MB!");
      }
      return isImg && isLt2M;
    },
    submitUpload(option) {
      console.log("submit upload", option);
      let formData = new FormData();
      formData.append(
        option.filename || "file",
        new Blob([option.file], { type: option.file.type }),
        option.file.name
      );
      postFileUpload(formData).then((res) => {
        if (res.code === 0) {
          this.imageUrl = res.data || "";
          this.$set(this.activeData.__config__, "defaultValue", res.data || "");
        }
      });
    },
    handleUpload(e) {
      this.$refs.upload.submit();

      e.stopPropagation();
    },
  },
};
</script>

<style lang="scss">
.un-eseal-setter {
  .el-button {
    margin-right: 4px;
  }
}
</style>
